<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<template #header>
				<div class="card-header">
					<span>{{ title }}</span>
				</div>
			</template>
			<el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm" >
				<el-form-item label="父级分类">
					<el-input v-model="pName" style="width: 500px" disabled></el-input>
				</el-form-item>
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="form.name" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="icon">
					<ul class="img-list">
						<li v-if="form.icon">
							<img :src="form.icon" alt="图片" style="width: 58px;height: 58px">
							<div class="img-tools">
								<el-icon>
									<component :is="deleteIcon" style="font-size: 14px;color:#fff;" @click="removeIcon()"/>
								</el-icon>
							</div>
						</li>
						<li>
							<div class="addImg" @click="showImage">
								<el-icon>
									<component :is="plusIcon"/>
								</el-icon>
							</div>
						</li>
						<li style="color: #999;font-size: 12px;width: 250px;line-height: 58px;margin-left: 30px">
							建议尺寸：180 * 180
						</li>
					</ul>
				</el-form-item>
				<el-form-item label="副标题">
					<el-input v-model="form.sub_name" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" rows="3" v-model="form.desc" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="大图">
					<ul class="img-list">
						<li v-if="form.big_pic">
							<img :src="form.big_pic" style="width: 58px;height: 58px" alt="图片">
							<div class="img-tools">
								<el-icon>
									<component :is="deleteIcon" style="font-size: 14px;color:#fff;" @click="removeImg()"/>
								</el-icon>
							</div>
						</li>
						<li>
							<div class="addImg" @click="showImageBig">
								<el-icon>
									<component :is="plusIcon"/>
								</el-icon>
							</div>
						</li>
						<li style="color: #999;font-size: 12px;width: 250px;line-height: 58px;margin-left: 30px">
							建议尺寸：468 * 340
						</li>
					</ul>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort" style="width: 500px" type="number"></el-input>
				</el-form-item>
				<el-form-item label="是否推荐">
					<el-radio v-model="form.is_recommend" label="1">是</el-radio>
					<el-radio v-model="form.is_recommend" label="2">否</el-radio>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-radio v-model="form.status" label="1">是</el-radio>
					<el-radio v-model="form.status" label="2">否</el-radio>
				</el-form-item>
				<el-form-item label="seo标题">
					<el-input v-model="form.seo_title" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="seo描述">
					<el-input v-model="form.seo_desc" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="seo关键词">
					<el-input v-model="form.seo_keywords" style="width: 500px"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="cateAddSubmit('ruleForm')" :loading="loading">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-card>

		<el-dialog title="" v-model="dialogVisible" width="1200px" class="image-check-dialog">
			<Attachment :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible=false" :select-num="1"></Attachment>
		</el-dialog>

		<el-dialog title="" v-model="bigDialogVisible" width="1200px" class="image-check-dialog">
			<Attachment :need-select="true" @selected-img="selectedBigImg" @close-dialog="bigDialogVisible=false" :select-num="1"></Attachment>
		</el-dialog>
	</el-main>
</template>

<script>
	import Attachment from "@/components/attachment";

	export default {
		components: {
			Attachment
		},
		data() {
			return {
				pName: '',
				dialogVisible: false,
				bigDialogVisible: false,
				limitNum: 1,
				form: {
					id: 0,
					pid: 0,
					level: 1,
					name: '',
					sub_name: '',
					desc: '',
					icon: '',
					big_pic: '',
					sort: 0,
					is_recommend: '2',
					status: '1',
					seo_title: '',
					seo_desc: '',
					seo_keywords: ''
				},
				loading: false,
				rules: {
					name: [
						{ required: true, message: '请输入分类名称'}
					],
					icon: [
						{ required: true, message: '请上传图标'}
					]
				},
				title: '添加商品分类',
				plusIcon: "el-icon-plus",
				deleteIcon: "el-icon-delete",
			}
		},
		mounted() {
			this.pName = this.$route.query.pname
			this.form.pid = this.$route.query.pid
			this.form.id = this.$route.query.id

			if (this.form.id) {
				this.title = '编辑商品分类'
				this.getCateInfo()
			} else {
				this.title = '添加商品分类'
			}
		},
		methods: {
			// 提交添加分类
			cateAddSubmit(formName) {
				this.$refs[formName].validate(async(valid) => {
					if (valid) {
						this.loading = true
						let res;
						if (this.form.id) {
							res = await this.$API.goodsCate.edit.post(this.form)
						} else {
							res = await this.$API.goodsCate.add.post(this.form)
						}

						this.loading = false
						if (res.code == 0) {
							this.$message.success(res.msg)

						} else {
							this.$message.error(res.msg)
						}
					}
				});
			},
			// 显示选择大图
			showImage() {
				this.dialogVisible = true
			},
			showImageBig() {
				this.bigDialogVisible = true
			},
			// 选择的icon
			selectedImg(item) {
				this.form.icon = item[0].url
				this.dialogVisible = false
			},
			// 选择的大图
			selectedBigImg(item) {
				this.form.big_pic = item[0].url
				this.bigDialogVisible = false
			},
			// 移除图片
			removeImg() {
				this.form.big_pic = ''
			},
			// 移除图标
			removeIcon() {
				this.form.icon = ''
			},
			// 获取编辑信息
			async getCateInfo() {
				let res = await this.$API.goodsCate.getEditInfo.get({id: this.form.id})

				let info = res.data.info
				this.pName = res.data.pName

				this.form = {
					id: info.id,
					pid: info.pid,
					level: info.level,
					name: info.name,
					sub_name: info.sub_name,
					desc: info.desc,
					icon: info.icon,
					big_pic: info.big_pic,
					sort: info.sort,
					is_recommend: info.is_recommend + '',
					status: info.status + '',
					seo_title: info.seo_title,
					seo_desc: info.seo_desc,
					seo_keywords: info.seo_keywords
				}
			}
		}
	}
</script>

<style scoped>
.img-list {
	height: 60px;
	padding-left: 0;
	margin-top: 0;
}
.img-list li:first-child {
	margin-left: 0;
}
.img-list li {
	width: 58px;
	height: 58px;
	float: left;
	margin-left: 5px;
	cursor: pointer;
	position: relative;
}
.addImg {
	height: 56px;
	width: 56px;
	line-height: 56px;
	text-align: center;
	border: 1px dashed rgb(221, 221, 221);
}
ul li {list-style: none}
.image-check-dialog .el-dialog__header {display: none}
.image-check-dialog .el-dialog__body {padding: 0;}
.img-list .img-tools {
	position: absolute;
	width: 58px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 43px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
</style>
